<template>
	<view class="container">
		<view class="title u-text-center u-font-40 font-b u-margin-20">
			<text>测评报告</text>
		</view>
		<!-- 测评报告数据展示 -->
		<view>
			<view class="t_1 u-flex flex-around">
				<view class="item_t_1 u-flex flex-center u-flex-col">
					<view class="u-font-lg color-333 u-p-t-30 u-p-b-20 font-b">您的职业兴趣：</view>
					<view >
						<text v-for="(item, index) in careerInterest.split('')" :key="index"
							class="font-b u-font-40" :style="{color: getColor(item), fontSize: '25px'}">{{item}}</text>
					</view>
				</view>
				<view class="item_t_1 u-flex flex-center u-flex-col">
					<view class="u-font-lg color-333 u-p-t-30 u-p-b-20 font-b">您的技能信心：</view>
					<view >
						<text v-for="(item, index) in skillConfidence.split('')" :key="index" class="font-b"
							:style="{color: getColor(item), fontSize: '25px'}">{{item}}</text>
					</view>
				</view>
			</view>
			<view>
				<view class="u-font-lg color-333 u-p-t-50 u-p-b-10 u-text-center font-b">您的职业价值观：</view>
				<view style="width: 80%;margin: 0 auto">
					<view class="item_percent" v-for="(item, index) in showData" v-if="details[item.key]" :key="index">
						<view class="u-font-sm" style="color: #2A6AAA">{{item.title}}</view>
						<view class="u-flex flex-between">
							<view class="flex-1 flex-center u-p-t-5">
								<u-line-progress active-color="#2A6AAA" :percent="details[item.key]"
									:show-percent="false" :height="20"></u-line-progress>
							</view>
							<view class="u-p-l-10 font-b u-font-28">
								{{details[item.key] > 33 ? (details[item.key] > 66 ? '高' : '中' ) : '低'}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btns">
			<view class="btn u-font-28 font-b" @click="toReport">查看完整报告</view>
			<view class="btn u-font-28 font-b" @click="refresh" v-if="isShowBtn && showBtn">刷新报告结果</view>
			<view class="btn font-b" style="background-color: #F0F0F0;color: #7B7B7B;" v-else>报告生成中</view>
		</view>
		<view class="rush u-text-center u-margin-30">
			<text style="color: #406FA8;" @click="anew">重新进入测评</text>
		</view>
		<HasJob></HasJob>
		<CommonChoose></CommonChoose>
	</view>
</template>

<script>
	import {
		TOAST
	} from "../../../util/util";
	import {
		THEME
	} from "../../../pages/mixins/config.js";
	import HasJob from './hasJob.vue'
	import CommonChoose from './CommonChoose'
	import {
		request
	} from "../../../util/api.js";
	export default {
		props: {
			reportData: Object,
			isShowBtn: Boolean
		},
		components: {
			HasJob,
			CommonChoose
		},
		data() {
			return {
				showBtn: true,
				details: {},
				customStyle: {
					background: THEME.btn_active_bg_color,
					padding: '0 30rpx',
					marginTop: '10px',
					marginLeft: '10%',
					width: '80%'
				},
				loading: true,
				msg: '',
				showData: [{
						title: '成就感',
						key: 'raccomplishment'
					}, {
						title: '生活方式',
						key: 'rlifestyle'
					}, {
						title: '挑战',
						key: 'rchallenge'
					},
					{
						title: '声望',
						key: 'rprestige'
					},
					{
						title: '同事',
						key: 'rcooperation'
					},
					{
						title: '安全感',
						key: 'rsecurity'
					},
					{
						title: '创造性',
						key: 'rcreativity'
					},
					{
						title: '监督',
						key: 'rsupervise'
					},
					{
						title: '收入',
						key: 'rincome'
					},
					{
						title: '多样化',
						key: 'rdiversification'
					},
					{
						title: '独立性',
						key: 'rindependence'
					},
					{
						title: '工作场所',
						key: 'rworkplace'
					}
				],
				kemu: [],
				tableData: [],
				careerInterest:"",
				skillConfidence:''
			}
		},
		created() {
			this.getReport()
		},
		methods: {
			// 获取测评报告
			getReport() {
				request({
					url: '/wx/getUserReport',
					method: 'post',
					platfom: 'weixin'
				}).then(res => {
					this.showData.sort((a, b) => {
						return res.data[b.key] - res.data[a.key]
					})
					this.loading = false
					this.details = res.data
					if(res.data.careerInterest){
						this.careerInterest=res.data.careerInterest
					}else{
						this.careerInterest=""
					}
					if(res.data.skillConfidence){
						this.skillConfidence=res.data.skillConfidence
					}else{
						this.skillConfidence=""
					}
					if (res.code != 200) {
						this.msg = res.msg
					}
					if (this.details) {
						let groupArr = this.groupByPath(this.details.expandList, 'linkType')
						this.kemu = groupArr.filter(item => item.path == '高考科目推荐')[0].data
						let tableData = groupArr.filter(item => item.path != '高考科目推荐')
						this.tableData = tableData
					}
				})
			},
			groupByPath(arr, key) {
				let map = {}
				for (let i = 0; i < arr.length; i++) {
					let ai = arr[i]
					if (!map[ai[key]]) {
						map[ai[key]] = [ai]
					} else {
						map[ai[key]].push(ai)
					}
				}
				let res = []
				Object.keys(map).forEach(keys => {
					res.push({
						path: keys,
						data: map[keys],
					})
				})
				return res
			},
			getColor(val) {
				let color = THEME.text_active_color
				switch (val) {
					case 'I':
						color = '#855BE9'
						break;
					case 'A':
						color = '#D33332'
						break;
					case 'E':
						color = '#857423'
						break;
					case 'C':
						color = '#478432'
						break;
					case 'R':
						color = '#2B72D4'
						break;
					case 'S':
						color = '#DE6C2B'
						break;
				}
				return color
			},
			// 跳转到测评报告
			toReport() {
				uni.navigateTo({
					url: "/package/report/index"
				})
			},
			// 刷新数据报告
			refresh() {
				request({
					url: '/wx/addReport',
					method: 'post'
				}).then(res => {
					uni.showModal({
						title:'提示',
						content:'报告正在为您定制生成中，预计1个工作日内完成制作，请耐心等待',
						showCancel:false,
						success:function(){
							
						}
					})
					this.showBtn = false
				})
			},
			// 重新进入测评方法
			anew() {
				uni.navigateTo({
					url: "/package/pince/index"
				})
			},

		}
	}
</script>

<style lang="scss">
	$active_color: #2A6AAA;

	.no_data {
		.no_img {
			width: 100%;
			height: 600upx;
		}
	}

	.bg_D86E63 {
		background: #2A6AAA;
	}

	.btn {
		padding: 20rpx 0rpx;
		background: #2A6CAC;
		color: #fff;
		border-radius: 23px;
		width: 260rpx;
		text-align: center;
	}

	.btns {
		display: flex;
		margin: 20rpx 0;
		justify-content: space-evenly;
		align-items: center;
	}
</style>
